import * as React from "react";
import { createRoot } from "react-dom/client";

function FunctionComponent() {
  const [number, setNumber] = React.useState(0);
  // let p = new Promise((resolve) => resolve());
  // p.then(() => {
  //   console.log("1");
  // });
  // p.then(() => {
  //   console.log("2");
  // });
  React.useEffect(() => {
    console.log("useEffect1");
    return () => {
      console.log("destroy useEffect1");
    };
  });
  React.useLayoutEffect(() => {
    console.log("useLayoutEffect2");
    return () => {
      console.log("destroy useLayoutEffect2");
    };
  });
  React.useEffect(() => {
    console.log("useEffect3");
    return () => {
      console.log("destroy useEffect3");
    };
  });
  React.useLayoutEffect(() => {
    console.log("useLayoutEffect4");
    return () => {
      console.log("destroy useLayoutEffect4");
    };
  });
  return <button onClick={() => setNumber(number + 1)}>{number}</button>;
}

// function FunctionComponent() {
//   React.useEffect(() => {
//     console.log("useEffect1");
//   }, []);
//   return <Test />;
// }
// function Test() {
//   React.useEffect(() => {
//     console.log("useEffect2");
//   }, []);
//   return <div>111</div>;
// }
let element = <FunctionComponent />;
const root = createRoot(document.getElementById("root"));
root.render(element);
